<template>
    <div>
        <el-card>
            <span>账号列表</span>
            <el-divider></el-divider>
            <el-table :data="tableData" style="width: 100%" ref="multipleTable" @selection-change="userChange">
                <!-- 复选框 -->

                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column label="ID" width="200">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.id }}</span>
                    </template>
                </el-table-column>
                <!-- ID -->

                <!-- 账号 -->

                <el-table-column label="账号" width="200">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.account }}</span>
                    </template>
                </el-table-column>

                <!-- 用户组 -->
                <el-table-column label="用户组" width="180">
                    <template slot-scope="scope">
                        <span>{{ scope.row.userGroup }}</span>
                    </template>
                </el-table-column>

                <!-- 创建日期 -->
                <el-table-column label="日期" width="200">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{
                            scope.row.ctime | formater
                        }}</span>
                    </template>
                </el-table-column>

                <!-- 操作功能 -->
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="max" @click="edit(scope.row)">编辑</el-button>
                        <el-button size="max" type="danger" @click="del(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 修改信息 -->
            <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="用户名" :label-width="formLabelWidth" style="width:320px">
                        <el-input v-model="form.account" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="用户组" :label-width="formLabelWidth">
                        <el-select v-model="form.userGroup" placeholder="请选择用户组">
                            <el-option label="admin" value="admin"></el-option>
                            <el-option label="user" value="user"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="determine">确 定</el-button>
                </div>
            </el-dialog>

            <div class="block">
                <el-pagination @size-change="sizeChange" @current-change="currentPage" :current-page="page"
                    :page-sizes="[3, 10, 20, 500]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
            <div style="margin-top: 20px">
                <el-button @click="delAll()" type="danger">批量删除</el-button>
                <el-button @click="cancel()">取消选择</el-button>
            </div>
        </el-card>
    </div>
</template>
<script>
import { userList, userDel, edit, batchdel } from "@/api/user.js";
export default {
    data() {
        return {
            tableData: [],
            uid: [],
            pageSize: 10, //每页显示多少条
            page: 1, //当前在第几页上
            total: 0, //数据总条数
            id: "",
            dialogFormVisible: false,
            form: {
                account: '',
                userGroup: 'admin'
            },
            formLabelWidth: '120px',
            ids:[],
        };
    },
    // 获取页面数据进行渲染

    created() {
        // 读取用户列表数据
        this.getData();
    },

    methods: {
        // 批量删除
        async delAll() {
            this.ids = this.uid.map(v => v.id)
            console.log("ids",this.ids);
            let deluid =await batchdel({ids:this.ids})
            console.log(deluid);
            this.getData();
        },
        // 取消选择
        cancel() {
            this.$refs.multipleTable.clearSelection()
        },
        userChange(val) {
            this.uid = val; //将选中的行赋值给rows
            console.log(this.uid);
        },
        // 编辑按钮
        edit(row) {
            console.log(row);
            this.dialogFormVisible = true,
                this.form = row
        },

        // 保存信息按钮
        async determine() {
            let res = await edit(this.form)

            this.dialogFormVisible = false
        },
        async del(row) {
            console.log("row", row);
            let res = await userDel({
                id: row.id,
            });
            if (res.data.code === 0) {
                this.getData();
            }
        },
        // 每页显示条数
        sizeChange(val) {
            this.pageSize = val;
            this.getData();
        },
        // 页码发生改变
        currentPage(val) {
            this.page = val;
            this.getData();
        },
        async getData() {
            let res = await userList({
                currentPage: this.page,
                pageSize: this.pageSize,
            });
            // 渲染表格
            this.tableData = res.data.data;

            // 分页
            this.total = res.data.total;
        },
    },
    filters: {
        // 日期过滤器
        formater(d) {
            let d1 = new Date(d);
            return d1.getFullYear() + "/" + (d1.getMonth() + 1) + "/" + d1.getDate();
        },
    },
};
</script>
